<!--
 * @Description: 工具
 * @Author: ZhangHan
 * @Date: 2025-08-26 15:39:19
 * @LastEditTime: 2025-08-27 15:29:09
 * @LastEditors: ZhangHan
-->
<template>
  <view>
    <view class="header">轻松转换文本大小写，支持全大写、全小写、首字母大写等多种模式</view>
    <view class="areacontent">
      <view>输入文本</view>
      <view class="textarea">
        <uni-easyinput type="textarea" v-model="value" placeholder="在这里输入需要转换的文本..."></uni-easyinput>
      </view>
      <view style="text-align: right">0字符</view>
    </view>
    <view class="btn_group">
      <view :class="['btn_item', item.class]" :key="index" v-for="(item, index) in btnList" @click="item.fnc()">{{
        item?.text }}</view>
    </view>
    <view class="resultbox">
      <view class="title">转换结果</view>
      <view class="box">{{ transfromValue }}</view>
    </view>
    <view class="action">
      <view class="action_item" @click="handleClear()">清除</view>
      <view class="action_item" @click="handleCopy()">复制</view>
    </view>
    <view class="tips">
      <view class="tip_head">
        <uni-icons type="info-filled" color="#3B82F6" size="18" class="icon" />
        使用说明
      </view>
      <view class="tip_item" v-for="(item, index) in textList">{{ index + 1 }}、{{ item }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useMessage } from "@/hooks/useMessage";
import { copyText, isUpperCaseChar } from "@/utils/common";

const { error } = useMessage();
const value = ref("");
const transfromValue = ref("");

interface IBtn {
  text: string;
  class: string;
  fnc: () => void;
}

const textList = [
  "在输入框中输入或粘贴需要转换的文本",
  "选择所需的转换模式（全大写、全小写等）",
  "转换结果将显示在下方，可以点击复制按钮复制结果",
];

const btnList: Array<IBtn> = [
  {
    text: "全大写",
    class: "primary",
    fnc: () => handleUpper(),
  },
  {
    text: "全小写",
    class: "primary",
    fnc: () => handleLower(),
  },
  {
    text: "首字母大写",
    class: "success",
    fnc: () => handleFirstUpper(),
  },
  {
    text: "大小写反转",
    class: "warn",
    fnc: () => handleReverse(),
  },
];

//全大写
const handleUpper = () => {
  checkValue();
  transfromValue.value = value.value.toUpperCase();
};

//全小写
const handleLower = () => {
  checkValue();
  transfromValue.value = value.value.toLowerCase();
};

//首字母大写
const handleFirstUpper = () => {
  checkValue();
  const str = value.value.slice(0, 1);
  const rest = value.value.slice(1);
  transfromValue.value = str.toUpperCase() + rest;
};

//校验是否有值
const checkValue = () => {
  if (value.value.trim() === "") {
    error("请输入需要转换的文本...");
    return false;
  }
};

//大小写反转
const handleReverse = () => {
  checkValue();
  const arr = value.value.split("");
  const newArr = arr.map((item) => {
    if (item.match(/[a-z]/i)) {
      if (isUpperCaseChar(item)) {
        return item.toLowerCase();
      } else {
        return item.toUpperCase();
      }
    } else {
      return item;
    }
  });
  transfromValue.value = newArr.join("");
};

//清除
const handleClear = () => {
  value.value = "";
  transfromValue.value = "";
};

//复制
const handleCopy = () => {
  checkValue();
  copyText(transfromValue.value);
};
</script>

<style scoped lang="scss">
@use "./index.scss";
</style>
